import {computed, designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Button, Checkbox, CheckboxGroup, Form, FormItem, Input, InputNumber, Radio, RadioGroup, Select, SelectOption} from "../../../../packages";
import {Tooltip} from "../../../../packages/components/Tooltip";
import QuestionCircleOutlined from "@ant-design/icons/QuestionCircleOutlined";

export const demo1 = designPage(() => {

  const state = reactive({
    formData: {} as any,
    formDisabledFields: [] as string[],
    flag: {
      disabled: undefined as undefined | boolean,
      readonly: undefined as undefined | boolean,
    },
  });

  const { formData, flag } = state;

  const levelData = [
    { levelName: '一级', code: '1' },
    { levelName: '二级', code: '2' },
    { levelName: '三级', code: '3' },
  ];

  return () => (
    <DemoRow title={'父子disabled以及readonly设置'}>
      <Form modelValue={formData} disabled={flag.disabled} readonly={flag.readonly}>
        <FormItem colon={false}>
          <Checkbox v-model={flag.disabled} label={'禁用'} style={{ marginRight: '8px' }} disabled={false} readonly={false}/>
          <Checkbox v-model={flag.readonly} label={'只读'} disabled={false} readonly={false}/>
        </FormItem>
        <FormItem label={'客户名称'} field={'name'}>
          <Input v-model={formData.name}/>
        </FormItem>
        <FormItem label={'客户员工数量'} field={'type'}>
          {{
            default: () => <InputNumber v-model={formData.type}/>,
            append: () => <Tooltip message="整数"><QuestionCircleOutlined/></Tooltip>
          }}
        </FormItem>
        <FormItem label={'客户加入时间'} field={'joinTime'} disabled={false}>
          <Input v-model={formData.joinTime}/>
          <span>&nbsp;至&nbsp;</span>
          <Input v-model={formData.name}/>
        </FormItem>
        <FormItem label={'是否老客户'} field={'oldFlag'} disabled={false}>
          <RadioGroup itemWidth="50%" v-model={formData.oldFlag}>
            <Radio label={'老客户'} value={'Y'} disabled/>
            <Radio label={'非老客户'} value={'N'}/>
          </RadioGroup>
        </FormItem>
        <FormItem label={'客户性质'} field={'properties'}>
          <CheckboxGroup itemWidth="50%" v-model={formData.properties}>
            <Checkbox label={'大客户'} value={'large'}/>
            <Checkbox label={'潜在客户'} value={'potential'}/>
            <Checkbox label={'长久客户'} value={'long'}/>
            <Checkbox label={'赢单客户'} value={'order'}/>
          </CheckboxGroup>
        </FormItem>
        <FormItem label={'客户级别'} field={'level'}>
          <Select v-model={formData.level}>
            {levelData.map(item => <SelectOption children={item.levelName} value={item.code} key={item.code}/>)}
          </Select>
        </FormItem>
        <FormItem label={'备注'} field={'comments'}>
          <Input textarea v-model={formData.comments}/>
        </FormItem>
        <FormItem colon={false} contentAlign={'center'} block>
          <Button label={'取消'} style={{ marginRight: '4px' }}/>
          <Button type="primary" label={'提交'}/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const state = reactive({
    formData: {} as any,
    formDisabledFields: [] as string[],
    flag: {
      disabled: undefined as undefined | boolean,
      readonly: undefined as undefined | boolean,
    },
  });

  const { formData, flag } = state;

  const levelData = [
    { levelName: '一级', code: '1' },
    { levelName: '二级', code: '2' },
    { levelName: '三级', code: '3' },
  ];

  const targetFormDisabledFields = computed(() => {
    return state.formDisabledFields.reduce((ret, item) => {
      ret[item] = true;
      return ret;
    }, {} as any);
  });

  return () => (
    <DemoRow title={'通过disabledFields控制禁用'}>
      <CheckboxGroup itemWidth="50%" v-model={state.formDisabledFields}>
        <Checkbox checkboxForAll label="全部"/>
        <Checkbox label="客户名称" value="name"/>
        <Checkbox label="客户员工数量" value="type"/>
        <Checkbox label="客户加入时间" value="joinTime"/>
        <Checkbox label="是否老客户" value="oldFlag"/>
        <Checkbox label="客户性质" value="properties"/>
        <Checkbox label="客户级别" value="level"/>
        <Checkbox label="备注" value="comments"/>
        <Checkbox label="禁用操作按钮" value="button"/>
      </CheckboxGroup>
      <br/>
      <div>
        {JSON.stringify(state.formDisabledFields)}
      </div>
      <br/>
      <Form modelValue={formData} disabledFields={targetFormDisabledFields.value}>
        <FormItem label={'客户名称'} field={'name'}>
          <Input v-model={formData.name}/>
        </FormItem>
        <FormItem label={'客户员工数量'} field={'type'}>
          {{
            default: () => <InputNumber v-model={formData.type}/>,
            append: () => <Tooltip message="整数"><QuestionCircleOutlined/></Tooltip>
          }}
        </FormItem>
        <FormItem label={'客户加入时间'} field={'joinTime'} disabled={false}>
          <Input v-model={formData.joinTime}/>
          <span>&nbsp;至&nbsp;</span>
          <Input v-model={formData.name}/>
        </FormItem>
        <FormItem label={'是否老客户'} field={'oldFlag'} disabled={false}>
          <RadioGroup itemWidth="50%" v-model={formData.oldFlag}>
            <Radio label={'老客户'} value={'Y'} disabled/>
            <Radio label={'非老客户'} value={'N'}/>
          </RadioGroup>
        </FormItem>
        <FormItem label={'客户性质'} field={'properties'}>
          <CheckboxGroup itemWidth="50%" v-model={formData.properties}>
            <Checkbox label={'大客户'} value={'large'}/>
            <Checkbox label={'潜在客户'} value={'potential'}/>
            <Checkbox label={'长久客户'} value={'long'}/>
            <Checkbox label={'赢单客户'} value={'order'}/>
          </CheckboxGroup>
        </FormItem>
        <FormItem label={'客户级别'} field={'level'}>
          <Select v-model={formData.level}>
            {levelData.map(item => <SelectOption children={item.levelName} value={item.code} key={item.code}/>)}
          </Select>
        </FormItem>
        <FormItem label={'备注'} field={'comments'}>
          <Input textarea v-model={formData.comments}/>
        </FormItem>
        <FormItem colon={false} contentAlign={'center'} block field="button">
          <Button label={'取消'} style={{ marginRight: '4px' }}/>
          <Button type="primary" label={'提交'}/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});
